﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/static/";
%>
<!DOCTYPE html>
<html lang="en">
	<head>
		<base href="<%=basePath%>">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>放箱</title>
		<meta name="description" content="" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
		<link rel="stylesheet" href="static/ace/css/bootstrap.css" />
		<link rel="stylesheet" href="static/ace/css/font-awesome.css" />
		<!-- text fonts -->
		<link rel="stylesheet" href="static/ace/css/ace-fonts.css" />
		<!-- ace styles -->
		<link rel="stylesheet" href="static/ace/css/ace.css" class="ace-main-stylesheet" id="main-ace-style" />
		<link rel="stylesheet" type="text/css" href="plugins/websocketInstantMsg/ext4/resources/css/ext-all.css">
		<script type="text/javascript" src="plugins/websocketInstantMsg/ext4/ext-all-debug.js"></script>

	</head>
		 
<body class="no-skin">
	<!-- /section:basics/navbar.layout -->
	<div class="main-container" id="main-container">
		<div id="selForm"></div>
		<div id="output"></div>
	</div>
</body>

	<script type="text/javascript">

		Ext.onReady(function () {
			var store = Ext.create('Ext.data.Store', {
				fields: ["billCode","ladingBillCode","loadingGoingShips","bookingStatus","estimateTime","mscBillCode",
					"shipperName","bookingClerk","containerOwner","boxTypeConfirm","appointEstimateShipTime",
					"appointShipRoute","bookingShippingRoutes","bookingSeagoingVessels","goodsType",
					"goodsNum","unit","goodsGrossWeight","","volume","tradeType","createTime","salerName",
					"forwarderCustomerService","transportClause","customsNum","tradeMethod","chineseName",
					"riverPort","bookingDischargingPort","bookingPlaceDelivery","riverUnload","riverDelivery",
					"estimateRiverBoatTime","bookingOperationNotes","shippingMark","sailingTimes"],
				pageSize: 25,  //页容量5条数据
				//是否在服务端排序 （true的话，在客户端就不能排序）
				remoteSort: false,
				remoteFilter: true,
				proxy: {
					type: 'ajax',
					url: '../putbox/list',
					reader: {   //这里的reader为数据存储组织的地方，下面的配置是为json格式的数据，例如：[{"total":50,"rows":[{"a":"3","b":"4"}]}]
						type: 'json', //返回数据类型为json格式
						root: 'result.list',  //数据
						totalProperty: 'result.total' //数据总条数
					}
				},
				sorters: [{
					property: 'ordeId',
					direction: 'desc'
				}],
				autoLoad: true
			});

			var grid = Ext.create('Ext.grid.Panel', {
				renderTo: "output",
				store: store,
				height: document.documentElement.clientHeight,
				stripeRows:true,
				columnLines: true,
				selModel:Ext.create('Ext.selection.CheckboxModel',{mode:"single", allowDeselect: true, showHeaderCheckbox:false}),
				columns: [
					{text: '托单编号', dataIndex: 'billCode', align: 'left', maxWidth: 100 ,locked: true},
					{text: '提单号', dataIndex: 'ladingBillCode', maxWidth: 200 ,locked:true},
					{text: '箱主', dataIndex: 'containerOwner', maxWidth: 80},
					{text: '装运港', dataIndex: 'riverPort', maxWidth: 80},
					{text: '预计放箱时间', dataIndex: 'estimateTime', maxWidth: 80, render:convertDate},
					{text: '海船装区', dataIndex: 'loadingGoingShips', align: 'left', minWidth: 80},
					{text: '卸货港', dataIndex: 'riverUnload', maxWidth: 80},
					{text: '交货地', dataIndex: 'riverDelivery', maxWidth: 80},
					{text: '业务员', dataIndex: 'salerName', maxWidth: 80},
					{text: '接单时间', dataIndex: 'createTime', maxWidth: 80 , render:convertDate},
					{text: '货代客服', dataIndex: 'forwarderCustomerService', maxWidth: 80},
					{text: '运输条款', dataIndex: 'transportClause', maxWidth: 80},
					{text: '箱型箱量', dataIndex: 'boxTypeConfirm', maxWidth: 80},
					{text: '中文品名', dataIndex: 'chineseName', maxWidth: 80},
					{text: '件数', dataIndex: 'goodsNum', maxWidth: 80},
					{text: '包装类别', dataIndex: 'unit', maxWidth: 80},
					{text: '货物毛重', dataIndex: 'goodsGrossWeight', maxWidth: 80},
					{text: '箱货总重', dataIndex: '', maxWidth: 80},
					{text: '总体积', dataIndex: 'volume', maxWidth: 80},
					{text: '货物种类', dataIndex: 'goodsType', maxWidth: 80},
					{text: '贸易类型', dataIndex: 'tradeType', maxWidth: 80},
					{text: '预计江船装船时间', dataIndex: 'estimateRiverBoatTime', maxWidth: 80, render:convertDate},
					{text: '海船周次', dataIndex: 'sailingTimes', maxWidth: 80},
					{text: '委托单位', dataIndex: 'shipperId', maxWidth: 80},
					{text: '托运人', dataIndex: 'shipperName', maxWidth: 80},
					{text: '订舱人员', dataIndex: 'bookingClerk', maxWidth: 80},
					{text: '订舱备注', dataIndex: 'bookingOperationNotes', maxWidth: 80}
				],
				bbar: [{
					xtype: 'pagingtoolbar',
					store: store,
					displayMsg: '显示 {0} - {1} 条，共计 {2} 条',
					emptyMsg: "没有数据",
					beforePageText: "当前页",
					afterPageText: "共{0}页",
					displayInfo: true
				}],
				listeners: {
					'itemclick': function (view, record, item, index, e) {
//                    Ext.MessageBox.alert("标题", record.data.cataId);
					}
				}
			});

			function convertDate(val) {
				return Ext.util.Format.date(new Date(val), 'Y-m-d');
			}

			var tradeTypeStore = Ext.create('Ext.data.Store', {
				fields: ['id', 'name'],
				data : [
					{"id":"", "name":"全部"},
					{"id":"AK", "name":"内贸"},
					{"id":"AZ", "name":"外贸"}
				]
			});

			var c1 = Ext.create('Ext.container.Container', {
				layout: 'column',
				defaults: { labelAlign: 'left', labelWidth: 60 },
				items: [
					{xtype: 'textfield', name: 'startDate1',columnWidth: 1/5,padding: '5px',fieldLabel: '托单编号'},
					{xtype: 'textfield', name: 'startDate2', columnWidth:  1/5,padding: '5px', fieldLabel: '提单号'},
					{xtype: 'textfield', name: 'startDate3',columnWidth: 1/5,padding: '5px',fieldLabel: '箱主'},
					{xtype: 'textfield', name: 'startDate4',columnWidth:  1/5,padding: '5px',fieldLabel: '订舱人员'},
					{xtype: 'combobox',  name: 'startDate5', columnWidth:  1/5,padding: '5px', fieldLabel: '放箱状态'}
				]
			});
			var c2 = Ext.create('Ext.container.Container', {
				layout: 'column',
//				defaults: { labelAlign: 'left', labelWidth: 60 },
				items: [
					{xtype: 'textfield', name: 'startDate6', columnWidth: 1/6,padding: '5px', fieldLabel: '货代客服'},
					{xtype: 'datefield', name: 'startDate7',columnWidth:  1/6,padding: '5px',fieldLabel: '放箱时间'},
					{xtype: 'datefield', name: 'startDate8',columnWidth:  1/6,padding: '5px',labelSeparator:'',fieldLabel: '--'},
					{xtype: 'datefield', name: 'startDate9',columnWidth:  1/6,padding: '5px',fieldLabel: '江船期'},
					{xtype: 'datefield', name: 'startDate10',columnWidth:  1/6,padding: '5px',labelSeparator:'',fieldLabel: '--'},
					{xtype: 'combobox',  name: 'startDate11',value:'',editable: false,displayField: 'name', queryMode: 'local',store:tradeTypeStore, valueField: 'id', columnWidth:  1/6,padding: '5px', fieldLabel: '贸易类型'}
				]
			});
			var bs = Ext.create('Ext.container.Container', {
				layout: 'column',
				items: [
					{layout : 'column',baseCls : 'my-panel-no-border', columnWidth: 2/5,   padding: '10px'},
					{layout : 'column',baseCls : 'my-panel-no-border',columnWidth: 1/5,  padding: '10px',  items: [
						{ style: {marginRight:'10px'}, xtype: "button",minWidth:70,icon:'../plugins/websocketInstantMsg/ext4/shared/icons/fam/add.png', text: "查  询" },
						{ style: {marginRight:'10px'},xtype: "button",minWidth:70,icon:'../plugins/websocketInstantMsg/ext4/shared/icons/fam/add.png', text: "放箱通知" }
					]},
					{layout : 'column',baseCls : 'my-panel-no-border', columnWidth: 2/5,  padding: '10px'}
				]
			});

			var selForm = Ext.create('Ext.form.Panel', {
				title:'托单信息列表',
				name: 'selForm',
				renderTo: "selForm",
				collapsed :true,
				height:140,
				collapsible:true,
				bodyStyle: {
					padding: '5px',
					border: 1
				},
				fieldDefaults: {
					labelAlign: 'left'
				},
				items: [c1, c2,bs]
			});





		});

	</script>

</html>